<template lang="html">
  <div class="doexercise">
    <div class="routeNav">
        Java > Java的基础语法
    </div>
    <div class="container">
      <div class="doex_left">
        <h3>Java的基础语法</h3>
        <ul>
          <li><a href="javascript:;">1.Java</a></li>
          <li><a href="javascript:;">2.Java</a></li>
          <li><a href="javascript:;" class="active">3.Java</a></li>
          <li><a href="javascript:;">4.Java</a></li>
          <li><a href="javascript:;">5.Java</a></li>
        </ul>
      </div>
      <div class="doex_middle">
        <h3>题目标题题目标题题目标题题目标题题目标题题目标题</h3>
        <p>A:A选项描述</p>
        <p>B:B选项描述</p>
        <p>C:C选项描述</p>
        <p>D:D选项描述</p>
        <button type="button" name="button">提交</button>
      </div>
      <div class="doex_right">
        <div class="news_title">
          <span>文章</span>
          <span>教程</span>
        </div>
        <div class="news_content">
          <ul>
               <li>
                 <h3>标题</h3>
                 <p>内容</p>
               </li>
               <li>
                 <h3>标题</h3>
                 <p>内容</p>
               </li>
               <li>
                 <h3>标题</h3>
                 <p>内容</p>
               </li>
             </ul>
             <ul>
               <li>
                 <h3>标题</h3>
                 <p>内容</p>
               </li>
               <li>
                 <h3>标题</h3>
                 <p>内容</p>
               </li>
               <li>
                 <h3>标题</h3>
                 <p>内容</p>
               </li>
             </ul>   
        </div>
      </div>
    </div> 
  </div>
</template>

<script>
export default {
  name:"doexercise",
  data(){
    return{
      exerciseData:[]
    }
  },
  created(){
    var url = this.HOST+"/boot01/questions/findAll";
    this.$axios.get(url)
    .then(res => {
      this.exerciseData = res.data;
    })
    .catch(error => {
      console.log(error)
    })
  },
}
</script>

<style scoped lang="css">
/*p{
  height: 500px;
}*/
.doexercise{
  border:15px solid #e6e9f0;
  padding:0 30px;
  width: 1200px;
  box-sizing:border-box;
  margin:20px auto;
  background: #ffffff;
  overflow: hidden;
}
.routeNav{
  font-weight:bold;
  padding-bottom: 18px;
  margin:20px 0;
  border-bottom: 1px solid #ebebeb;
}
.container{
  width: 100%;
  overflow: hidden;
  margin-bottom:30px;
}
.doex_left,.doex_middle,.doex_right{
  float: left;
}
.doex_left{
  width:199px;
  border: 1px solid #c8c8c8;
}
.doex_left h3{
  font-size: 14px;
  color:#bbbbbb;
  margin:21px 12px 12px 12px;
  font-weight: bold;
}
.doex_left ul{
  padding:5px;
  box-sizing:border-box;
}
.doex_left ul li{
  
  text-indent: 6px;
  border-bottom: 1px solid #dfe4ea;
  font-weight: bold;
}
.doex_left ul li a{
  padding:9px 0;
  margin:1px 0;
  display: block;
  color:#000000;
}
.doex_left ul li a:hover{
  background: #c6dafd;
}
.doex_left ul li a.active{
  background: #c6dafd;
}
.doex_middle{
  width: 627px;
  border: 1px solid #c8c8c8;
  margin-left: -1px;
  background: #f9faf5;
}
.doex_right{
  width: 260px;
  margin-left: 15px;
}
</style>
